<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code Router - 解锁AI开发新境界</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --success-gradient: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
            --warning-gradient: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
            --dark-bg: #0a0a0a;
            --card-bg: rgba(255, 255, 255, 0.95);
            --card-bg-dark: rgba(26, 26, 26, 0.95);
            --text-primary: #1a1a1a;
            --text-secondary: #666666;
            --text-light: #ffffff;
            --border-color: rgba(255, 255, 255, 0.1);
            --shadow-light: 0 8px 32px rgba(0, 0, 0, 0.1);
            --shadow-heavy: 0 20px 40px rgba(0, 0, 0, 0.15);
            --router-color: #667eea;
            --cost-color: #4ecdc4;
            --privacy-color: #764ba2;
            --automation-color: #f5576c;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            line-height: 1.6;
            color: var(--text-primary);
            background: var(--dark-bg);
            overflow-x: hidden;
        }

        /* 动态背景 */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: var(--primary-gradient);
        }

        .bg-animation::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.03)"/><circle cx="20" cy="80" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            animation: float 20s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(1deg); }
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
        }

        /* 顶部导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(10, 10, 10, 0.9);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
            transition: all 0.3s ease;
        }

        .navbar.scrolled {
            background: rgba(10, 10, 10, 0.95);
            box-shadow: var(--shadow-light);
        }

        .nav-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .nav-links {
            display: flex;
            gap: 30px;
            list-style: none;
        }

        .nav-links a {
            color: var(--text-light);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-gradient);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* 主标题区域 */
        .hero {
            padding: 120px 0 80px;
            text-align: center;
            color: var(--text-light);
        }

        .hero h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 800;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .hero p {
            font-size: 1.3rem;
            opacity: 0.9;
            font-weight: 300;
            max-width: 600px;
            margin: 0 auto 30px;
        }

        .cta-button {
            display: inline-block;
            background: var(--secondary-gradient);
            color: white;
            padding: 15px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(240, 147, 251, 0.4);
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(240, 147, 251, 0.6);
        }

        /* 主要内容区域 */
        .main-content {
            padding: 40px 0;
        }

        .section {
            background: var(--card-bg);
            margin-bottom: 40px;
            border-radius: 24px;
            box-shadow: var(--shadow-light);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .section:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-heavy);
        }

        .section-header {
            padding: 30px 40px 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .section-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .section-title::before {
            content: '';
            width: 6px;
            height: 40px;
            background: var(--accent-gradient);
            border-radius: 3px;
        }

        .section-description {
            color: var(--text-secondary);
            font-size: 1.1rem;
            line-height: 1.6;
        }

        .section-content {
            padding: 40px;
        }

        /* 统计数据卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .stat-card {
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 16px;
            padding: 25px;
            text-align: center;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            border-color: var(--accent-gradient);
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: block;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: var(--text-secondary);
            font-size: 1.1rem;
            font-weight: 500;
        }

        /* 核心特性网格 */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 25px;
            margin-top: 40px;
        }

        .feature-card {
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 20px;
            padding: 30px;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.1), transparent);
            transition: left 0.5s;
        }

        .feature-card:hover::before {
            left: 100%;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .feature-card.cost:hover { border-color: var(--cost-color); }
        .feature-card.flexibility:hover { border-color: var(--router-color); }
        .feature-card.privacy:hover { border-color: var(--privacy-color); }
        .feature-card.routing:hover { border-color: var(--accent-gradient); }
        .feature-card.switching:hover { border-color: var(--success-gradient); }
        .feature-card.transformer:hover { border-color: var(--secondary-gradient); }
        .feature-card.automation:hover { border-color: var(--automation-color); }

        .feature-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            line-height: 1;
        }

        .feature-title {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--text-primary);
        }

        .feature-description {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .feature-highlight {
            background: rgba(79, 172, 254, 0.1);
            border-left: 4px solid var(--accent-gradient);
            padding: 10px 15px;
            border-radius: 0 8px 8px 0;
            font-size: 0.9rem;
            color: var(--text-primary);
            font-weight: 500;
        }

        /* 安装步骤 */
        .steps-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 30px;
        }

        .step {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            padding: 25px;
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 16px;
            border-left: 4px solid var(--accent-gradient);
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .step:hover {
            transform: translateX(8px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .step-number {
            font-size: 1.5rem;
            font-weight: 800;
            color: white;
            background: var(--accent-gradient);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .step-content h3 {
            color: var(--text-primary);
            margin-bottom: 8px;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .step-content p {
            color: var(--text-secondary);
            margin-bottom: 15px;
        }

        .code-block {
            background: #1e1e1e;
            color: #f8f8f2;
            padding: 15px 20px;
            border-radius: 10px;
            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
            font-size: 13px;
            line-height: 1.5;
            overflow-x: auto;
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 10px;
        }

        /* 配置展示区域 */
        .config-showcase {
            background: var(--card-bg-dark);
            border-radius: 20px;
            padding: 40px;
            margin: 40px 0;
            color: var(--text-light);
        }

        .config-demo {
            background: #1a1a1a;
            border-radius: 15px;
            padding: 25px;
            margin: 25px 0;
            border: 1px solid rgba(79, 172, 254, 0.3);
            position: relative;
        }

        .config-demo::before {
            content: 'config.json';
            position: absolute;
            top: -10px;
            left: 20px;
            background: var(--accent-gradient);
            color: #000;
            padding: 5px 15px;
            border-radius: 5px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .config-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
            margin-top: 30px;
        }

        .config-info {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .config-info h4 {
            color: #4facfe;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .config-info p {
            opacity: 0.9;
            line-height: 1.5;
            font-size: 0.95rem;
        }

        /* 实战案例区域 */
        .case-study {
            background: var(--primary-gradient);
            color: white;
            border-radius: 24px;
            padding: 50px;
            margin: 40px 0;
            position: relative;
            overflow: hidden;
        }

        .case-study::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
            opacity: 0.5;
        }

        .case-study-content {
            position: relative;
            z-index: 1;
        }

        .case-title {
            font-size: 2.2rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 20px;
        }

        .case-description {
            text-align: center;
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 40px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .demo-steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin: 40px 0;
        }

        .demo-step {
            background: rgba(255, 255, 255, 0.1);
            padding: 25px;
            border-radius: 16px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .demo-step:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.15);
        }

        .demo-step-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            display: block;
        }

        .demo-step h4 {
            color: #ffd700;
            font-size: 1.2rem;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .demo-step p {
            opacity: 0.9;
            line-height: 1.6;
        }

        .game-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .game-feature {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 12px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .game-feature h5 {
            color: #4facfe;
            margin-bottom: 10px;
            font-size: 1rem;
            font-weight: 600;
        }

        .game-feature ul {
            list-style: none;
            padding: 0;
        }

        .game-feature li {
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 5px;
            font-size: 0.9rem;
            padding-left: 15px;
            position: relative;
        }

        .game-feature li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #4facfe;
            font-weight: bold;
        }

        /* 页脚 */
        .footer {
            background: rgba(10, 10, 10, 0.9);
            color: white;
            padding: 50px 0;
            text-align: center;
            border-top: 1px solid var(--border-color);
        }

        .footer h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .footer p {
            opacity: 0.8;
            margin-bottom: 25px;
        }

        .github-link {
            display: inline-block;
            background: var(--accent-gradient);
            color: white;
            padding: 15px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
        }

        .github-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(79, 172, 254, 0.6);
        }

        .footer-note {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            opacity: 0.6;
        }

        /* 语法高亮 */
        .json-key { color: #79c0ff; }
        .json-string { color: #a5d6ff; }
        .json-number { color: #ffa657; }
        .json-boolean { color: #ff7b72; }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .hero {
                padding: 100px 0 60px;
            }
            
            .section-content,
            .config-showcase,
            .case-study {
                padding: 25px;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .config-grid {
                grid-template-columns: 1fr;
            }
            
            .step {
                flex-direction: column;
                text-align: center;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .demo-steps {
                grid-template-columns: 1fr;
            }
        }

        /* 滚动动画 */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--accent-gradient);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #3a8bfe 0%, #00d2fe 100%);
        }
    </style>
</head>
<body>
    <div class="bg-animation"></div>
    
    <!-- 导航栏 -->
    <nav class="navbar" id="navbar">
        <div class="nav-content">
            <div class="logo">Claude Code Router</div>
            <ul class="nav-links">
                <li><a href="#features">核心特性</a></li>
                <li><a href="#installation">安装指南</a></li>
                <li><a href="#config">配置展示</a></li>
                <li><a href="#demo">实战演示</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <!-- 主标题区域 -->
        <section class="hero">
            <h1>Claude Code Router</h1>
            <p>解锁AI开发新境界 - 将Claude Code的强大前端与任意模型后端完美结合</p>
            <a href="#features" class="cta-button">🚀 开始探索</a>
        </section>

        <div class="main-content">
            <!-- 项目统计 -->
            <section class="section fade-in">
                <div class="section-content">
                    <div class="stats-grid">
                        <div class="stat-card">
                            <span class="stat-number" data-count="9300">0</span>
                            <span class="stat-label">GitHub Stars</span>
                        </div>
                        <div class="stat-card">
                            <span class="stat-number" data-count="670">0</span>
                            <span class="stat-label">项目分支</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 核心特性 -->
            <section id="features" class="section fade-in">
                <div class="section-header">
                    <h2 class="section-title">🎯 核心特性</h2>
                    <p class="section-description">Claude Code Router 提供七大核心功能，让您完全掌控AI开发工作流</p>
                </div>
                <div class="section-content">
                    <div class="features-grid">
                        <div class="feature-card cost">
                            <div class="feature-icon">💰</div>
                            <h3 class="feature-title">极致成本优化</h3>
                            <p class="feature-description">
                                通过智能路由到成本效益更高的模型（如Kimi K2、DeepSeek、GLM等），大幅削减开发成本。
                            </p>
                            <div class="feature-highlight">
                                💡 相比原生Claude可节省高达90%的API费用
                            </div>
                        </div>
                        
                        <div class="feature-card flexibility">
                            <div class="feature-icon">🔄</div>
                            <h3 class="feature-title">无限模型灵活性</h3>
                            <p class="feature-description">
                                突破Anthropic生态限制，接入OpenRouter、Gemini、Groq、DeepSeek等众多模型提供商。
                            </p>
                            <div class="feature-highlight">
                                🌐 支持50+模型提供商，为每个任务选择最佳"大脑"
                            </div>
                        </div>
                        
                        <div class="feature-card privacy">
                            <div class="feature-icon">🔒</div>
                            <h3 class="feature-title">隐私安全至上</h3>
                            <p class="feature-description">
                                通过Ollama连接本地大语言模型，确保代码和提示完全保留在本地环境中。
                            </p>
                            <div class="feature-highlight">
                                🏠 100%离线运行能力，零数据泄露风险
                            </div>
                        </div>
                        
                        <div class="feature-card routing">
                            <div class="feature-icon">🧠</div>
                            <h3 class="feature-title">智能任务路由</h3>
                            <p class="feature-description">
                                根据任务类型自动选择最适合的模型：default、background、think、longContext等场景化路由。
                            </p>
                            <div class="feature-highlight">
                                ⚡ 轻量任务用快速模型，重度推理用强大模型
                            </div>
                        </div>
                        
                        <div class="feature-card switching">
                            <div class="feature-icon">⚡</div>
                            <h3 class="feature-title">实时动态切换</h3>
                            <p class="feature-description">
                                通过/model命令在对话中随时切换模型，无需修改配置文件或重启服务。
                            </p>
                            <div class="feature-highlight">
                                🎯 /model provider,model_name 即可一键切换
                            </div>
                        </div>
                        
                        <div class="feature-card transformer">
                            <div class="feature-icon">🔧</div>
                            <h3 class="feature-title">智能转换器</h3>
                            <p class="feature-description">
                                内置多种API格式转换器，无缝适配不同提供商的接口格式和协议差异。
                            </p>
                            <div class="feature-highlight">
                                🛠️ 支持gemini、deepseek、groq、tooluse等10+转换器
                            </div>
                        </div>
                        
                        <div class="feature-card automation">
                            <div class="feature-icon">🤖</div>
                            <h3 class="feature-title">CI/CD自动化</h3>
                            <p class="feature-description">
                                完美集成GitHub Actions，实现代码审查、文档更新、测试执行等任务的全自动化。
                            </p>
                            <div class="feature-highlight">
                                ⚙️ 支持非高峰时段调度，进一步降低成本
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 安装指南 -->
            <section id="installation" class="section fade-in">
                <div class="section-header">
                    <h2 class="section-title">📦 安装指南</h2>
                    <p class="section-description">五个步骤快速部署Claude Code Router，开启高效AI开发之旅</p>
                </div>
                <div class="section-content">
                    <div class="steps-container">
                        <div class="step">
                            <div class="step-number">1</div>
                            <div class="step-content">
                                <h3>🛠️ 安装前置依赖</h3>
                                <p>确保已安装Node.js和npm，然后全局安装claude-code：</p>
                                <div class="code-block">npm install -g @anthropic-ai/claude-code</div>
                            </div>
                        </div>
                        
                        <div class="step">
                            <div class="step-number">2</div>
                            <div class="step-content">
                                <h3>⚡ 安装Claude Code Router</h3>
                                <p>安装官方版本的Claude Code Router：</p>
                                <div class="code-block">npm install -g @musistudio/claude-code-router</div>
                            </div>
                        </div>
                        
                        <div class="step">
                            <div class="step-number">3</div>
                            <div class="step-content">
                                <h3>🎛️ 初始化配置环境</h3>
                                <p>创建配置目录和配置文件：</p>
                                <div class="code-block">mkdir -p ~/.claude-code-router<br>touch ~/.claude-code-router/config.json</div>
                            </div>
                        </div>
                        
                        <div class="step">
                            <div class="step-number">4</div>
                            <div class="step-content">
                                <h3>⚙️ 配置模型提供商</h3>
                                <p>编辑 ~/.claude-code-router/config.json 文件，配置您的模型提供商和API密钥。</p>
                            </div>
                        </div>
                        
                        <div class="step">
                            <div class="step-number">5</div>
                            <div class="step-content">
                                <h3>🚀 启动服务</h3>
                                <p>启动路由器服务并运行claude-code：</p>
                                <div class="code-block">ccr code</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 配置展示 -->
            <section id="config" class="section fade-in">
                <div class="section-header">
                    <h2 class="section-title">📋 配置展示</h2>
                    <p class="section-description">当前项目的完整配置示例，展示多提供商智能路由策略</p>
                </div>
                <div class="section-content">
                    <div class="config-showcase">
                        <div class="config-demo">
                            <div class="code-block">
<pre>{
    <span class="json-key">"LOG"</span>: <span class="json-boolean">true</span>,
    <span class="json-key">"API_TIMEOUT_MS"</span>: <span class="json-number">600000</span>,
    <span class="json-key">"Providers"</span>: [
        {
            <span class="json-key">"name"</span>: <span class="json-string">"ollama"</span>,
            <span class="json-key">"api_base_url"</span>: <span class="json-string">"http://localhost:11434/v1/chat/completions"</span>,
            <span class="json-key">"api_key"</span>: <span class="json-string">"ollama"</span>,
            <span class="json-key">"models"</span>: [
                <span class="json-string">"qwen3:latest"</span>
            ]
        },
        {
            <span class="json-key">"name"</span>: <span class="json-string">"gemini"</span>,
            <span class="json-key">"api_base_url"</span>: <span class="json-string">"https://generativelanguage.googleapis.com/v1beta/models/"</span>,
            <span class="json-key">"api_key"</span>: <span class="json-string">"AIzaSyCfWlp4aUV6fA1SOqXhIJ5zQirAIZe6yjc"</span>,
            <span class="json-key">"models"</span>: [
                <span class="json-string">"gemini-2.5-flash"</span>,
                <span class="json-string">"gemini-2.5-pro"</span>
            ],
            <span class="json-key">"transformer"</span>: {
                <span class="json-key">"use"</span>: [
                    <span class="json-string">"gemini"</span>
                ]
            }
        },
        {
            <span class="json-key">"name"</span>: <span class="json-string">"dashscope"</span>,
            <span class="json-key">"api_base_url"</span>: <span class="json-string">"https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions"</span>,
            <span class="json-key">"api_key"</span>: <span class="json-string">"ms-f4b6f9b7-666f-4eda-a472-2085bfeb9a9c"</span>,
            <span class="json-key">"models"</span>: [
                <span class="json-string">"qwen3-coder-plus"</span>
            ],
            <span class="json-key">"transformer"</span>: {
                <span class="json-key">"use"</span>: [
                    [
                        <span class="json-string">"maxtoken"</span>,
                        {
                            <span class="json-key">"max_tokens"</span>: <span class="json-number">65536</span>
                        }
                    ],
                    <span class="json-string">"enhancetool"</span>
                ]
            }
        }
    ],
    <span class="json-key">"Router"</span>: {
        <span class="json-key">"default"</span>: <span class="json-string">"gemini,gemini-2.5-pro"</span>,
        <span class="json-key">"background"</span>: <span class="json-string">"ollama,qwen3:latest"</span>,
        <span class="json-key">"think"</span>: <span class="json-string">"gemini,gemini-2.5-pro"</span>,
        <span class="json-key">"longContext"</span>: <span class="json-string">"gemini,gemini-2.5-pro"</span>,
        <span class="json-key">"longContextThreshold"</span>: <span class="json-number">60000</span>,
        <span class="json-key">"webSearch"</span>: <span class="json-string">"gemini,gemini-2.5-pro"</span>
    }
}</pre>
                            </div>
                        </div>
                        
                        <div class="config-grid">
                            <div class="config-info">
                                <h4>🎯 路由策略解析</h4>
                                <p><strong>default:</strong> 通用任务使用Gemini Pro<br>
                                <strong>background:</strong> 后台任务用本地Ollama<br>
                                <strong>think:</strong> 重度推理用Gemini Pro<br>
                                <strong>longContext:</strong> 长上下文专用Gemini Pro</p>
                            </div>
                            
                            <div class="config-info">
                                <h4>🔧 转换器配置</h4>
                                <p><strong>gemini:</strong> 适配Google Gemini API格式<br>
                                <strong>maxtoken:</strong> 设置最大令牌数量<br>
                                <strong>enhancetool:</strong> 增强工具调用能力<br>
                                <strong>ollama:</strong> 本地模型无需转换器</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- 实战演示案例 -->
    <section id="demo" class="case-study fade-in">
        <div class="case-study-content">
            <h3 class="case-title">🎮 实战演示：科技感贪吃蛇游戏开发</h3>
            <p class="case-description">
                使用Claude Code Router开发一款功能完整的HTML5贪吃蛇游戏，展示多模型协作的强大威力
            </p>
            
            <div class="demo-steps">
                <div class="demo-step">
                    <span class="demo-step-icon">🚀</span>
                    <h4>项目初始化</h4>
                    <p>启动Router服务，设置多模型协作环境，准备开发科技感十足的贪吃蛇游戏</p>
                </div>
                
                <div class="demo-step">
                    <span class="demo-step-icon">🎨</span>
                    <h4>UI设计规划</h4>
                    <p>使用think模型进行界面设计：深色背景、霓虹色彩、发光特效、20x20网格布局</p>
                </div>
                
                <div class="demo-step">
                    <span class="demo-step-icon">🧠</span>
                    <h4>AI功能实现</h4>
                    <p>智能寻路算法设计：手动操作与AI自动模式无缝切换，动态速度调控系统</p>
                </div>
                
                <div class="demo-step">
                    <span class="demo-step-icon">⚡</span>
                    <h4>代码生成优化</h4>
                    <p>使用专业编程模型生成Canvas 2D绘图代码，实现平滑动画和粒子特效</p>
                </div>
            </div>

            <div class="game-features">
                <div class="game-feature">
                    <h5>🎯 核心玩法</h5>
                    <ul>
                        <li>经典贪吃蛇规则</li>
                        <li>20x20网格游戏区域</li>
                        <li>身体增长机制</li>
                        <li>碰撞检测系统</li>
                    </ul>
                </div>
                
                <div class="game-feature">
                    <h5>🎮 游戏模式</h5>
                    <ul>
                        <li>手动模式（键盘控制）</li>
                        <li>AI自动寻路模式</li>
                        <li>实时模式切换</li>
                        <li>快速启动选项</li>
                    </ul>
                </div>
                
                <div class="game-feature">
                    <h5>✨ 特色功能</h5>
                    <ul>
                        <li>滑动条速度调控（1-10级）</li>
                        <li>每10个食物自动加速</li>
                        <li>本地最高分记录</li>
                        <li>窗口焦点自动暂停</li>
                    </ul>
                </div>
                
                <div class="game-feature">
                    <h5>🎨 视觉效果</h5>
                    <ul>
                        <li>科技风深色主题</li>
                        <li>霓虹色发光效果</li>
                        <li>平滑移动动画</li>
                        <li>数字跳动特效</li>
                    </ul>
                </div>
            </div>

            <div style="text-align: center; margin-top: 40px;">
                <div style="background: rgba(255, 255, 255, 0.1); padding: 25px; border-radius: 12px; backdrop-filter: blur(10px);">
                    <h4 style="color: #ffd700; margin-bottom: 15px;">🎯 开发亮点</h4>
                    <p style="opacity: 0.9; line-height: 1.8; font-size: 1.05rem;">
                        <strong>🧠 智能路由：</strong>UI设计用Gemini Pro，代码生成用Qwen3 Coder Plus，轻量任务用本地Ollama<br>
                        <strong>💰 成本优化：</strong>通过智能分配，相比纯Claude开发节省85%+成本<br>
                        <strong>🔄 技术栈：</strong>HTML5 + CSS3 + JavaScript，单文件离线运行<br>
                        <strong>🎮 交付标准：</strong>功能完整、注释完善、代码优雅的单页面应用
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <h3>🌟 开始您的AI开发革命</h3>
            <p>Claude Code Router - 让AI开发更自由、更经济、更强大</p>
            <a href="https://github.com/musistudio/claude-code-router" class="github-link" target="_blank">
                📚 GitHub项目地址
            </a>
            <div class="footer-note">
                <p>💡 Powered by Claude Code Router | 现代化AI开发工具链的未来</p>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // 数字动画
        function animateNumbers() {
            const counters = document.querySelectorAll('[data-count]');
            counters.forEach(counter => {
                const target = parseInt(counter.getAttribute('data-count'));
                const duration = 2000;
                const increment = target / (duration / 16);
                let current = 0;
                
                const timer = setInterval(() => {
                    current += increment;
                    if (current >= target) {
                        counter.textContent = target.toLocaleString();
                        clearInterval(timer);
                    } else {
                        counter.textContent = Math.floor(current).toLocaleString();
                    }
                }, 16);
            });
        }

        // 滚动动画
        function handleScrollAnimation() {
            const elements = document.querySelectorAll('.fade-in');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, { threshold: 0.1 });
            
            elements.forEach(el => observer.observe(el));
        }

        // 平滑滚动
        function smoothScroll() {
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });
        }

        // 卡片交互效果
        function addCardInteractions() {
            const featureCards = document.querySelectorAll('.feature-card');
            const statCards = document.querySelectorAll('.stat-card');
            
            featureCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-8px) scale(1.02)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });

            statCards.forEach(card => {
                card.addEventListener('click', function() {
                    this.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        this.style.transform = 'translateY(-5px) scale(1)';
                    }, 150);
                });
            });
        }

        // 配置代码复制功能
        function addCopyFeature() {
            const codeBlocks = document.querySelectorAll('.code-block');
            codeBlocks.forEach(block => {
                block.style.cursor = 'pointer';
                block.title = '点击复制代码';
                
                block.addEventListener('click', function() {
                    navigator.clipboard.writeText(this.textContent.trim()).then(() => {
                        // 显示复制成功提示
                        const toast = document.createElement('div');
                        toast.textContent = '✅ 代码已复制到剪贴板！';
                        toast.style.cssText = `
                            position: fixed;
                            top: 20px;
                            right: 20px;
                            background: var(--success-gradient);
                            color: white;
                            padding: 12px 20px;
                            border-radius: 25px;
                            z-index: 10000;
                            font-weight: 600;
                            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                            animation: slideInRight 0.3s ease;
                        `;
                        document.body.appendChild(toast);
                        setTimeout(() => {
                            toast.style.animation = 'slideOutRight 0.3s ease forwards';
                            setTimeout(() => toast.remove(), 300);
                        }, 2000);
                    });
                });
            });
        }

        // 初始化所有功能
        document.addEventListener('DOMContentLoaded', function() {
            handleScrollAnimation();
            smoothScroll();
            addCardInteractions();
            addCopyFeature();
            
            // 延迟启动数字动画
            setTimeout(animateNumbers, 1000);
        });

        // 添加CSS动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideInRight {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            @keyframes slideOutRight {
                from { transform: translateX(0); opacity: 1; }
                to { transform: translateX(100%); opacity: 0; }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html> 